<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/alarm.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/cubic.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/foot.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/sidebar-menu1.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/efficiency.css" rel="stylesheet">

</head>

<body style="background-color:transparent;">
<div class="top-div">

    <div class="cubic">
        <ul>
            <li><a href="${ctx!}/web/analysis/efficiency">&nbsp;实时分析&nbsp;</a></li>
            <li class="current"><a href="${ctx!}/web/analysis/efficiency-history">&nbsp;历史分析&nbsp;</a></li>
        </ul>
    </div>
</div>

<div class="foot-div analysis" style="height: 90%;">

    <div id="left_bottom" class="data_box" style="height: 85%">
        <div class="data_box_bar">
            <span class="data_box_icon"></span>
            <span class="data_box_title">机组能效</span>
            <select onchange="jizunengxiaoClick(event)" id="selectYear_jizu"
                    style="float:right;margin-right: 40px;margin-top: 20px;width: 80px;">

            </select>
            <#--<button style="margin-right: 85px;margin-top: 60px;" onclick="jizunengxiaoClick(event,1);">采暖系统</button>-->
            <#--<button class="active" style="margin-top: 60px;" onclick="jizunengxiaoClick(event,0);">-->
            <#--制冷系统-->
            <#--</button>-->
        </div>
        <div style="height: 72%;width: 100%;float: left">
            <div id="left_chart" style="height: 100%;width:100%;"></div>
        </div>
    </div>

    <div id="right_bottom" class="data_box" style="height: 85%">
        <div class="data_box_bar">
            <span class="data_box_icon"></span>
            <span class="data_box_title">系统能效</span>
            <select onchange="xitongnengxiaoClick(event)" id="selectYear_xitong"
                    style="float:right;margin-right: 40px;margin-top: 20px;width: 80px;">

            </select>
            <#--<button style="margin-right: 85px;margin-top: 60px;" onclick="xitongnengxiaoClick(event,1);">采暖系统</button>-->
            <#--<button class="active" style="margin-top: 60px;" onclick="xitongnengxiaoClick(event,0);">-->
            <#--制冷系统-->
            <#--</button>-->
        </div>
        <div style="height: 72%;width: 100%;float: left">
            <div id="right_chart" style="height: 100%;width:100%;"></div>
        </div>

    </div>
</div>

</div>


<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<script src="${ctx!}/assets/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${ctx!}/assets/js/plugins/validate/messages_zh.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>

<script src="${ctx!}/assets/js/echarts.min.js"></script>
<!-- 自定义js -->
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

<!-- Page-Level Scripts -->
<script>
    $(function () {
        initYearSelect($("#selectYear_jizu"))
        initYearSelect($("#selectYear_xitong"))
        setSize();
        jizunengxiaoClick(null, 0);
        xitongnengxiaoClick(null, 0);
    })

    function initYearSelect(select) {
        var currYear = new Date().getFullYear()
        for (var i = 0; i < 4; i++) {
            select.append("<option value='" + (currYear - i) + "'>" + (currYear - i) + "</option>")
        }

    }

    var jizu_currMode = 0

    //绘制机组能效
    function jizunengxiaoClick(e, mode) {
        if (e != null && $(e.target).is("button")) {
            var $this = $(e.target)
            if ($this.hasClass("active")) {
                return
            }
            $this.siblings().removeClass("active");
            $this.addClass("active");
            jizu_currMode = mode
        }
        if (e != null && $(e.target).is("select")) {

        }
        var currYear = $("#selectYear_jizu").val()
        $.ajax({
            type: "GET",
            url: "${ctx!}/history/analysis/cop?baseYear=" + currYear,
            success: function (data) {
                // layer.close(upload);
                var data = eval("(" + data + ")")
                if (data.success) {
                    data = data.data
                    var dates = data.dates
                    for (var i = 0; i < dates.length; i++) {
                        dates[i] = dates[i].substring(0, 4);
                    }
                    var ydatas = [data.heatingcop, data.coolingcop]
                    var legends = ["供暖机组", "制冷机组"]
                    jizunengxiao_draw(dates, ydatas, legends);
                } else {
                    layer.msg("机组能效曲线显示失败," + data.message)
                }
            }
        });
    }

    function jizunengxiao_draw(xdata, ydata, legends) {
        var myChart = echarts.init(document.getElementById("left_chart"));
        //指定图表的配置项和数据
        myChart.clear();

        // 指定图表的配置项和数据
        function getSeries() {
            var series = [];
            for (var i = 0; i < ydata.length; i++) {
                var e = {
                    smooth: true,
                    name: legends[i],
                    type: 'bar',
                    data: ydata[i],
                    barWidth: 30,
                    itemStyle: {    // 图形的形状
                        barBorderRadius: [3, 3, 2, 2]
                    }
                };
                series.push(e);
            }
            return series;
        }

        var option = {
            color: ["#A85443", "#6C8AC6"],
            textStyle: {
                color: '#fff'
            },
            title: {
                textStyle: {
                    color: '#fff'
                }
            },
            grid: {
                left: '10%',
                right: "10%",
                top: "30%",
                bottom: "5%"

            },
            tooltip: {
                trigger: 'axis',
                // formatter: function (params) {
                //     console.log(params)
                //     var show = x_data[params[0].dataIndex] + '\n'
                //     for (var param in params) {
                //         show += param.marker + param.seriesName + parseFloat(param.data).toFixed(3) + '(t)'
                //     }
                //     return show
                // },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                textStyle: {
                    color: '#fff',
                },
                name: legends,
                top: '10%',
                right: '10%'
            },
            xAxis: {
                name: "year",
                data: xdata,
                axisLine: {
                    lineStyle: {
                        color: '#C8CBD0',
                        width: 2,//这里是为了突出显示加上的
                    }
                },
                // boundaryGap: false,
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: "#90CEF9",//字体颜色
                        fontSize: 12 //字体大小
                    }
                }
            },
            yAxis: {
                name: "COP",
                scale: true,
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: "#90CEF9",//字体颜色
                        fontSize: 12 //字体大小
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: { //X轴分隔符
                    show: true,
                    lineStyle: {
                        color: "#273C55",
                        type: 'dashed'
                    }

                },
                min: 0,
                max: 5,
                interval: 2.5,
                itemStyle: {
                    //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                    emphasis: {
                        barBorderRadius: 30
                    },

                    normal: {
                        //柱形图圆角，初始化效果
                        barBorderRadius: [10, 10, 10, 10],
                        label: {
                            show: true,//是否展示
                            position: 'top',
                            textStyle: {
                                fontWeight: 'bolder',
                                fontSize: '12',
                                fontFamily: '微软雅黑',
                            }
                        }
                    }
                }
            },
            series: getSeries()
        };
        myChart.setOption(option);
    }

    //绘制系统能效
    function xitongnengxiaoClick(e, mode) {
        var currYear = $("#selectYear_xitong").val()
        $.ajax({
            type: "GET",
            url: "${ctx!}/history/analysis/scop?&baseYear=" + currYear,
            success: function (data) {
                // layer.close(upload);
                var data = eval("(" + data + ")")
                if (data.success) {
                    data = data.data
                    var dates = data.dates
                    for (var i = 0; i < dates.length; i++) {
                        dates[i] = dates[i].substring(0, 4);
                    }
                    var ydatas = [data.heatingscop, data.coolingscop]
                    var legends = ["供暖", "制冷"]
                    xitongnengxiao_draw(dates, ydatas, legends);
                } else {
                    layer.msg("系统能效显示失败," + data.message)
                }
            }
        });
    }

    function xitongnengxiao_draw(xdata, ydata, legends) {
        var myChart = echarts.init(document.getElementById("right_chart"));
        //指定图表的配置项和数据
        myChart.clear();

        // 指定图表的配置项和数据
        function getSeries() {
            var series = [];
            for (var i = 0; i < ydata.length; i++) {
                var e = {
                    smooth: true,
                    name: legends[i],
                    type: 'bar',
                    data: ydata[i],
                    barWidth: 30,
                    itemStyle: {    // 图形的形状
                        barBorderRadius: [3, 3, 2, 2]
                    }
                };
                series.push(e);
            }
            return series;
        }

        var option = {
            color: ["#6C8AC6", "#A85443"],
            textStyle: {
                color: '#fff'
            },
            title: {
                textStyle: {
                    color: '#fff'
                }
            },
            grid: {
                left: '10%',
                right: "10%",
                top: "30%",
                bottom: "5%"

            },
            tooltip: {
                trigger: 'axis',
                // formatter: function (params) {
                //     console.log(params)
                //     var show = x_data[params[0].dataIndex] + '\n'
                //     for (var param in params) {
                //         show += param.marker + param.seriesName + parseFloat(param.data).toFixed(3) + '(t)'
                //     }
                //     return show
                // },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                textStyle: {
                    color: '#fff'
                },
                name: legends,
                top: '10%',
                right: '10%'
            },
            xAxis: {
                name: "year",
                data: xdata,
                axisLine: {
                    lineStyle: {
                        color: '#C8CBD0',
                        width: 2,//这里是为了突出显示加上的
                    }
                },
                // boundaryGap: false,
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: "#90CEF9",//字体颜色
                        fontSize: 12 //字体大小
                    }
                }
            },
            yAxis: {
                name: "COPs",
                scale: true,
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: {
                        color: "#90CEF9",//字体颜色
                        fontSize: 12 //字体大小
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: { //X轴分隔符
                    show: true,
                    lineStyle: {
                        color: "#273C55",
                        type: 'dashed'
                    }

                },
                min: 0,
                max: 5,
                interval: 2.5,
                itemStyle: {
                    //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                    emphasis: {
                        barBorderRadius: 30
                    },

                    normal: {
                        //柱形图圆角，初始化效果
                        barBorderRadius: [10, 10, 10, 10],
                        label: {
                            show: true,//是否展示
                            position: 'top',
                            textStyle: {
                                fontWeight: 'bolder',
                                fontSize: '12',
                                fontFamily: '微软雅黑',
                            }
                        }
                    }
                }
            },
            series: getSeries()
        };
        myChart.setOption(option);
    }


    function setSize() {
        var barheight = $("#navbar", window.parent.document).height();//获取当前页面总高度
        var top = barheight + $(".top-div").height() + 20;//顶部页面的高度（注意height计算的高度没有把顶部嵌套的页面高度加进去）
        $(".foot-div").css("top", top);//给底部页面添加绝对路径距离上面高度
        $(".foot-div").height(document.documentElement.clientHeight - top);
    }


</script>


</body>

</html>
